<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <router-link :to="{path: '/schoolHome'}"><el-menu-item index="1">天津中德应用技术大学</el-menu-item></router-link>
    <el-sub-menu index="2">
      <template #title >学校概况</template>
      <el-menu-item index="2-1" style="font-size: 20px;color: blue">海纳百川 敬业乐群</el-menu-item>
      <router-link :to="{path: '/schoolInfo'}"><el-menu-item index="2-2">学校简介</el-menu-item></router-link>
      <router-link :to="{path: '/CurrentLeader'}"><el-menu-item index="2-3">现任领导</el-menu-item></router-link>
      <el-menu-item index="2-4">历史沿革</el-menu-item>
      <el-menu-item index="2-5">组织机构</el-menu-item>
      <el-menu-item index="2-6">历任领导</el-menu-item>
      <el-menu-item style="width: 300px; height: 120px" index="2-12"> <img style="width: 100%" src="src/assets/menu1.jpg" > </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>院系设置</template>
      <el-menu-item index="3-1" style="font-size: 20px;color: blue">诚实守信 精益求精</el-menu-item>
      <router-link :to="{path: '/mechanicalEngineering'}"><el-menu-item index="3-2">机械工程学院</el-menu-item></router-link>
      <el-menu-item index="3-3">航空航天学院</el-menu-item>
      <router-link :to="{path: '/SoftwareCommunication'}"><el-menu-item index="3-4">软件与通信学院</el-menu-item></router-link>
      <el-menu-item index="3-5">应用外国语学院</el-menu-item>
      <el-menu-item index="3-6">能源工程学院</el-menu-item>
      <el-menu-item index="3-7">基础实验实训中心</el-menu-item>
      <el-menu-item index="3-8">艺术学院</el-menu-item>
      <el-menu-item index="3-9">马克思主义学院</el-menu-item>
      <el-menu-item index="3-10">基础课部</el-menu-item>
      <el-menu-item index="3-11">中西中心</el-menu-item>
      <el-menu-item style="width: 300px; height: 110px" index="3-12"> <img style="width: 100%" src="src/assets/menu2.jpg" > </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>教育教学</template>
      <el-menu-item index="4-1" style="font-size: 20px;color: blue">政治过硬 技能精湛
        诚实守信 理性平和</el-menu-item>
      <el-menu-item index="4-2">本科生教育</el-menu-item>
      <el-menu-item index="4-3">高职教育</el-menu-item>
      <el-menu-item index="4-4">留学生教育</el-menu-item>
      <el-menu-item index="4-5">继续教育</el-menu-item>
      <el-menu-item index="4-6">研究生教育</el-menu-item>
      <el-menu-item index="4-7">中职教育</el-menu-item>
      <el-menu-item index="4-8">联合培养</el-menu-item>
      <el-menu-item style="width: 300px; height: 110px" index="4-12"> <img style="width: 100%" src="src/assets/menu3.jpg" > </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>科学研究</template>
      <el-menu-item index="5-1" style="font-size: 20px;color: blue">博学之 审问之
        慎思之 明辨之 笃行之</el-menu-item>
      <el-menu-item index="5-2">科研动态</el-menu-item>
      <el-menu-item index="5-3">科研动态</el-menu-item>
      <el-menu-item index="5-4">学科建设</el-menu-item>
      <el-menu-item index="5-5">学术期刊</el-menu-item>
      <el-menu-item style="width: 300px; height: 110px" index="5-12"> <img style="width: 100%" src="src/assets/menu2.jpg" > </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
a{
  text-decoration: none;
}
</style>